import * as React from 'react';
import { Form, DatePicker, Select, Badge } from '@teamix/ui';
import { ButtonIcon, YunxiaoIcon } from '@alife/devops-ui';
import Popup from 'components/popup';
import '../index.scss';
// import docs from 'utils/docs';
import dayjs from 'dayjs';
import intl from '../../../../../../../locale';

const { RangePicker } = DatePicker;

const formItemLayout = {
  labelCol: {
    span: 6,
  },

  wrapperCol: {
    fixedSpan: 12,
  },
};

const typeDataSource = [
  {
    value: '',
    label: intl.get({
      id: 'code-assets.groupActivity.containers.filterForm.AllTypes',
      defaultMessage: '所有类型',
    }),
  },
  {
    value: 'team',
    label: intl.get({
      id: 'code-assets.groupActivity.containers.filterForm.Members',
      defaultMessage: '成员',
    }),
  },
  {
    value: 'push',
    label: intl.get({
      id: 'code-assets.groupActivity.containers.filterForm.Submitted',
      defaultMessage: '提交',
    }),
  },
  {
    value: 'merged',
    label: intl.get({
      id: 'code-assets.groupActivity.containers.filterForm.MergeRequest',
      defaultMessage: '合并请求',
    }),
  },
];

export default class FilterForm extends React.Component {
  state = {
    hasDot: false,
  };

  setFormInit = () => {
    this.props.field.setValues({
      event_filter: '',
      start_time: null,
      end_time: null,
      range: null,
    });
  };

  onSearchResult = () => {
    this.props.field.validate((errors) => {
      if (!errors) {
        const search = this.props.field.getValues();
        if (search.event_filter || search.start_time || search.end_time || search.range) {
          this.setState({
            hasDot: true,
          });
        } else {
          this.setState({
            hasDot: false,
          });
        }
        this.props.getGroupActivities(1, search);
      }
    });
  };

  onResetClick = () => {
    this.setFormInit();
    this.onSearchResult();
  };

  onRangePickerOk = () => {
    this.onSearchResult();
  };

  onFilterChange = (value) => {
    this.props.field.setValue('event_filter', value);
    this.onSearchResult();
  };

  disabledDate = (date) => {
    return (
      date && date.valueOf() < dayjs(dayjs().format('YYYY-MM-DD')).subtract(1, 'year').valueOf()
    );
  };

  render() {
    const { field } = this.props;
    const { init } = field;

    return (
      <Popup
        size="large"
        trigger={
          <Badge dot={this.state.hasDot}>
            <ButtonIcon name="filter-line" />
          </Badge>
        }
        triggerType="click"
        footer={
          <Form.Item style={{ marginBottom: '0px' }}>
            <Form.Reset
              text
              type="primary"
              style={{ border: 0 }}
              onClick={this.onResetClick}
              toDefault
              className="advanced-search-form-btn"
            >
              <YunxiaoIcon type="delete-line" />
              {intl.get({
                id: 'code-assets.groupActivity.containers.filterForm.ClearAllFilterConditions',
                defaultMessage: '清除所有筛选条件',
              })}
            </Form.Reset>
          </Form.Item>
        }
      >
        <Form {...formItemLayout} labelTextAlign="left" field={field}>
          {/* <Form.Item label="成员">
             <div ref={(o) => { this.container = o; }}>
               <MemberTrigger onChange={this.onMemberChange} value={this.state.operatorData} container={() => this.container} />
             </div>
            </Form.Item> */}

          <Form.Item
            label={intl.get({
              id: 'code-assets.groupActivity.containers.filterForm.Type',
              defaultMessage: '类型',
            })}
          >
            <Select
              mode="single"
              followTrigger
              dataSource={typeDataSource}
              {...init('event_filter', {
                initValue: '',
              })}
              onChange={this.onFilterChange}
            />
          </Form.Item>
          <Form.Item
            label={
              <div>
                {intl.get({
                  id: 'code-assets.groupActivity.containers.filterForm.Time',
                  defaultMessage: '时间',
                })}
              </div>
            }
            style={{ marginBottom: 0 }}
          >
            <RangePicker
              {...init('range')}
              followTrigger
              popupAlign="tr br"
              onOk={this.onRangePickerOk}
              // disabledDate={this.disabledDate}
            />
          </Form.Item>
        </Form>
      </Popup>
    );
  }
}
